<template>
  <div class="Login">
    <h2>登录</h2>
    账号: <input type="text" v-model="formData.username"><br>
    密码: <input type="text" v-model="formData.password_de"><br>
    验证码: <input type="text" v-model="formData.code"><br>
    <br>
    <img :src="img" @click="getCode">
    <button @click="doLogin">登录</button>

  </div>
</template>

<script setup lang="ts" name="Login">
import {onMounted, reactive, ref} from "vue";
import {login, loginCaptcha} from "@/ts/login";
import {encrypt} from "@/ts/rsaEncrypt.js";

const formData = reactive({
  username: '',
  password_de: '',
  password: '',
  code: '',
  uuid: ''
})
let img = ref("")

function getCode() {
  loginCaptcha().then(result => {
    img.value = result.img
    formData.uuid = result.uuid
  })
}

function doLogin() {
  formData.password = encrypt(formData.password_de)
  console.log(formData)
  login(formData).then(result => {
    console.log(result)
  })
}

onMounted(()=>{
  getCode()
})

</script>

<style scoped>
  .Login {
    background-color: skyblue;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
  }
  input {
    margin: 5px 5px;
  }
  img {
    width: 100px;
    margin: 5px;
  }
</style>